import * as echarts from "echarts";

// 折线图固定配置数据
const lineChartsList = [
  {
    name: "报修",
    color: "rgba(39, 166, 255, 1)"
  },
  {
    name: "投诉",
    color: "rgba(255, 116, 76, 1)"
  },
  {
    name: "其他",
    color: "rgba(145, 169, 178, 1)"
  }
];

// 获取折线类型
const lineType = lineChartsList.reduce((arr, item) => {
  return arr.concat(item.name);
}, []);

// dataset 字段映射
const dimensionsFieldList = ["name", "fix", "complain", "order"];

/**
 * 多折线图配置处理方法
 * @param {Array<Object>} data 传入相关数据
 * @returns {Object} 返回 Echarts Option 配置
 */
export const multipleLineOptionHandler = (data = [], unit = "件") => {
  const seriesList = [];
  lineChartsList.forEach(item => seriesList.push(createLineChart({ ...item })));

  return {
    tooltip: {
      trigger: "axis",
      formatter: params => createTooltip(params, { unit }),
      backgroundColor: "rgba(3, 26, 47, 0.6)",
      textStyle: { color: "#fff", fontSize: 12 }
    },

    legend: {
      top: "10%",
      left: "15%",
      itemGap: 14,
      itemWidth: 10,
      itemHeight: 10,
      data: lineType,
      textStyle: { fontSize: 10, color: "#fff" },
      lineStyle: { width: 0 }
    },

    grid: {
      top: "40%",
      right: "5%",
      bottom: "10%",
      left: "5%",
      padding: "0 0 10 0",
      containLabel: true
    },

    dataset: {
      dimensions: dimensionsFieldList,
      source: data
    },

    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        axisLabel: {
          textStyle: { fontSize: 12, color: "rgba(255, 255, 255, 0.65)" }
        }
      }
    ],

    yAxis: {
      type: "value",
      name: unit,
      nameTextStyle: {
        align: "left",
        padding: [0, 0, 0, -18],
        color: "rgba(255, 255, 255, 0.65)"
      },
      splitLine: {
        lineStyle: { type: "dashed", color: "rgba(72, 72, 73, 1)" }
      },
      axisLabel: {
        textStyle: { fontSize: 12, color: "rgba(255, 255, 255, 0.65)" }
      }
    },
    series: seriesList
  };
};

/**
 * 创建折线图配置处理方法
 * @param {Object} options 传入相关配置数据
 * @returns {Object} 返回 Echarts Series Line Option 配置
 */
const createLineChart = (options = {}) => {
  return {
    name: options.name,
    type: "line",
    smooth: true,
    symbol: "roundRect",
    symbolSize: 1,
    areaStyle: {
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          {
            offset: 0,
            color: options.color
          },
          {
            offset: 0.8,
            color: "rgba(255, 255, 255, 0)"
          }
        ],
        false
      ),
      shadowBlur: 10,
      opacity: 0.3
    },
    itemStyle: { color: options.color }
  };
};

/**
 * 创建 Tooltip formatter 配置
 * @param {Object} formatterParams Tooltip formatter params 数据
 * @param {Object} options 传入额外相关配置数据
 * @returns {String} 返回 Tooltip formatter 配置
 */
const createTooltip = (formatterParams, options) => {
  const { unit } = options;
  const [fixData, complainData, orderData] = formatterParams;
  const { marker: fixMarker, seriesName: fixSeriesName, value } = fixData;
  const { marker: complainMarker, seriesName: complainName } = complainData;
  const { marker: orderMarker, seriesName: orderSeriesName } = orderData;
  const { name, fix, complain, order } = value;

  const fixContent = `${fixMarker}${fixSeriesName}：${fix} ${unit}`;
  const complainContent = `${complainMarker}${complainName}：${complain} ${unit}`;
  const orderContent = `${orderMarker}${orderSeriesName}：${order} ${unit}`;

  return `${name}<br />${fixContent}<br />${complainContent}<br />${orderContent}`;
};
